<div id="htmx_modal" data-cy="htmx_modal"
    _="on closeModal remove me">
    <div _="on click trigger closeModal" class="fixed bg-black z-50 w-full h-full opacity-75"></div>
    <div class="fixed z-50 p-12 px-16 bg-blue-400 border-2 border-gray-400 rounded-lg text-lg text-center"
         style="top: 40%; left: 50%; transform: translate(-50%, -50%);"
         data-cy="confirm_modal">
        <div class="text-white mb-8 text-xl">{{ modal_text }}</div>
        <div class="ltr:ml-auto rtl:mr-auto ltr:mr-auto rtl:ml-auto mt-4 flex flex-row justify-center">
            <button data-cy="htmx_modal_yes_button" 
                    class="green-btn block m-4 w-40 pb-4 pt-4" 
                    hx-post="{{ htmx_endpoint }}"
                    hx-target="{{ htmx_target }}"
                    hx-swap="{{ htmx_swap or 'innerHTML' }}"
                    {% if htmx_indicator is defined %}hx-indicator="{{ htmx_indicator }}" {% endif %}
                    _="
                        on click trigger closeModal
                        {% if hyperscript %}
                        then {{ hyperscript }}
                        {% endif %}
                     ">
                {{_('yes')}}
            </button>
            <button class="red-btn block m-4 w-40 pb-4 pt-4"
                    _="on click trigger closeModal ">
                    {{_('no')}}
            </button>
        </div>
    </div>
</div>